<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2023-12-01 15:21:23
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-04-26 20:14:52
-->
<template>
    <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="案例" name="first">
            <el-scrollbar>
                <!-- 普通表单 -->
                <ExamplePanel file="form1.text" desc="表单包括各种输入表单项，比如input、select、radio、checkbox等" title="案例1-基础表单">
                    <template v-slot:example>
                        <Form1></Form1>
                    </template>
                </ExamplePanel>
                <!-- 验证表单 -->
                <ExamplePanel file="form2.text" desc="验证表单通过配置fields中的每项rules实现（规则和 Element-Plus保持一致）" title="案例2-验证表单">
                    <template v-slot:example>
                        <Form2></Form2>
                    </template>
                </ExamplePanel>
                <!-- 自定义表单操作按钮 -->
                <ExamplePanel file="form3.text" desc="验证表单通过配置fields中的每项rules实现（规则和 Element-Plus保持一致）" title="案例3-自定义表单操作按钮">
                    <template v-slot:example>
                        <Form3></Form3>
                    </template>
                </ExamplePanel>
                <!-- 表单中含有自定义组件 -->
                <ExamplePanel file="form4.text"
                    desc="表单通过配置fields中的type: component开启自定义组件,comp:我们开发的自定义组件（自定义组件必须实现v-modal功能）" title="案例4-表单中含有自定义表单组件">
                    <template v-slot:example>
                        <Form4></Form4>
                    </template>
                </ExamplePanel>
                <!-- 联动表单  -->
                <ExamplePanel file="form5.text"
                    desc="联动表单：表单中含有清空联动，自动填充联动，禁用联动，取值限制联动，非必填联动，日期联动。
                    表单通过配置fields中的type: component开启自定义组件,comp:我们开发的自定义组件（自定义组件必须实现v-modal功能）。
                    <p>联动表单案例如下：<p>
                    <p>1.禁用联动：年龄< 18 && 不为空，是否已婚 禁用。</p>
                    <p>2.日期联动：开始日期不能大于结束日期，结束日期不能 小于开始日期</p>
                    <p>3.清空联动：职业和必备技能实现联动（一般用于关联操作）</p>  
                    <p>4.自动填充联动：年龄>=18 是否已婚：自动填充是</p>  
                    <p>5.非必填联动：年龄>=18 是否已婚：必填</p> 
                    <p>6.option联动：职业和必备技能实现联动(根据其他条件实现选项过滤)</p> 
                    " title="案例5-联动表单">
                    <template v-slot:example>
                        <Form5></Form5>
                    </template>
                </ExamplePanel>
            </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="文档" name="second">
            <Document></Document>
        </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ExamplePanel from '../components/ExamplePanel.vue'
import Document from './components/Document.vue';
import Form1 from './components/Form1/index.vue';
import Form2 from './components/Form2/index.vue';
import Form3 from './components/Form3/index.vue';
import Form4 from './components/Form4/index.vue';
import Form5 from './components/Form5/index.vue';
const activeName = ref('first')
</script>